<template>
    <div class="room">
        <div ref="chartPanel"></div>
    </div>
</template>
<script>
    let echarts
    export default {
        name: '',
        props: ['type', 'items'],
        data() {
            return {
                charts: ''
            }
        },
        methods: {
            // 初始化图表
            init() {
                let options = null
                if (this.type) { // 有type值时判断类型取得options
                    if (this.type === 'scatter') {
                        options = this.createScatter()
                    } else if (this.type === 'line') {
                        options = this.createLine()
                    } else if (this.type === 'bar') {
                        options = this.createBar()
                    } else if (this.type === 'pie') {
                        options = this.createPie()
                    }
                } else {
                    // 无type值时默认按'line'使用
                    options = this.createLine()
                }
                this.charts = echarts.init(this.$refs.chartPanel)
                for (let i in this.items) {
                    let exist = false
                    for (let j in options) {
                        if (i === j) {
                            let option
                            if (this.$method.isArrayFn(options[j])) {
                                for (let z in this.items[i]) {
                                    let arr
                                    arr = {...options[j][z], ...this.items[i][z]}
                                    options[j][z] = arr
                                }
                            } else {
                                option = {...options[j], ...this.items[i]}
                                options[j] = option
                            }
                            exist = true
                        }
                    }
                    if (!exist) options[i] = this.items[i]
                }
                this.charts.setOption(options)
            },
            // 散点图
            createScatter() {
                return {
                    title: {
                        text: '散点图'
                    },
                    tooltip: {
                        trigger: 'item' // 需要hover时出现黑框必须填这个
                    },
                    xAxis: {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        minInterval: 1, // 设置最小间隔
                        splitNumber: 10 // 设置最多有多少个间隔
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                type: 'dashed' // 设置Y轴的虚线
                            }
                        },
                        minInterval: 1, // 设置最小间隔
                        splitNumber: 10 // 设置最多有多少个间隔
                    },
                    series: [
                        {
                            type: 'scatter', // 表明这是散点图
                            symbolSize: 10, // 控制散点的大小
                            color: '#47c2ac' // 控制散点的颜色
                        }
                    ]
                }
            },
            // 折线图
            createLine() {
                return {
                    title: {
                        text: '折线图'
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        type: 'line'
                    }]
                }
            },
            // 柱状图
            createBar() {
                return {
                    title: {
                        text: '柱状图'
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        type: 'bar'
                    }]
                }
            },
            // 饼图
            createPie() {
                return {
                    title: {
                        text: '饼图'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            }
        },
        mounted() {
            echarts = this.$echarts
            this.$nextTick(function () {
                this.init()
            })
        },
        update() {
            this.init()
        }
    }
</script>
<style scoped lang="less">
    .room {
        div {
            width: 100%;
            height: 400px;
        }
    }
</style>
